window.addEventListener('load', function () {



  //功能1: 向上滚动的动画
  (function () {
    // 将页面中li标签进行克隆
    let lis = document.querySelectorAll('.listBox li');
    lis.forEach(function (item) {
      item.parentNode.appendChild(item.cloneNode(true));
    });
  })();

  // 功能2: 点击标题切换
  let btns = this.document.querySelector('.left_middle_continer .title');
  btns.addEventListener('click', function (e) {
    let elment = e.target;
    if (elment.nodeName == 'A') {
      document.querySelector('.active').classList.remove('active');
      elment.classList.add('active');
      // 显示对应的内容区域
      let myid = elment.dataset.myid;
      document.querySelectorAll('.listBox .content').forEach(function (item) {
        item.style.display = 'none';
      });
      document.querySelector('.' + myid).style.display = 'block';
    }
  });

  // 功能3: 动态加载饼状图
  (function () {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.querySelector('.pieBox'));
    // 指定图表的配置项和数据
    let option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}:{c}'
      },
      series: [
        {
          type: 'pie',
          // 设置饼状图大小
          radius: ['10%', '70%'],
          // 设置饼状图位置
          center: ['50%', '50%'],
          // 展示数据方式
          roseType: 'radius',
          itemStyle: {
            borderRadius: 5
          },
          data: [
            { value: 20, name: '云南' },
            { value: 26, name: '北京' },
            { value: 24, name: '山东' },
            { value: 25, name: '河北' },
            { value: 20, name: '江苏' },
            { value: 25, name: '浙江' },
            { value: 30, name: '四川' },
            { value: 42, name: '湖北' }
          ],
          // 设置文字大小
          label: {
            fontSize: 14
          },
          // 设置视觉引导线
          labelLine: {
            length: 8,
            length2: 10
          }
        }
      ],
      color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // 自定义数据
    let myData = [
      { value: 93, name: "北京" },
      { value: 21, name: "上海" },
      { value: 75, name: "广州" },
      { value: 46, name: "深圳" },
      { value: 88, name: "成都" },
      { value: 34, name: "重庆" },
      { value: 67, name: "杭州" },
      { value: 52, name: "南京" },
      { value: 19, name: "武汉" },
      { value: 81, name: "西安" },
      { value: 43, name: "天津" },
      { value: 79, name: "苏州" },
      { value: 31, name: "大连" },
      { value: 64, name: "青岛" },
      { value: 57, name: "厦门" },
      { value: 96, name: "长沙" },
      { value: 28, name: "沈阳" },
      { value: 85, name: "哈尔滨" },
      { value: 40, name: "郑州" },
      { value: 72, name: "济南" },
      { value: 36, name: "石家庄" },
      { value: 99, name: "乌鲁木齐" },
      { value: 24, name: "呼和浩特" },
      { value: 60, name: "南宁" },
      { value: 54, name: "福州" },
      { value: 87, name: "昆明" },
      { value: 42, name: "贵阳" },
      { value: 78, name: "兰州" },
      { value: 30, name: "西宁" },
      { value: 90, name: "银川" },
      { value: 26, name: "海口" },
      { value: 63, name: "台北" },
      { value: 51, name: "香港" },
      { value: 84, name: "澳门" },
      { value: 38, name: "宁波" },
      { value: 76, name: "无锡" },
      { value: 45, name: "温州" },
      { value: 25, name: '浙江' },
      { value: 30, name: '四川' },
      { value: 42, name: '湖北' }
    ];

    // 默认一页显示8条数据
    let pageSize = 8;
    // 当前起始页
    let pageIndex = 0;

    // 总页码
    let count = Math.ceil(myData.length / pageSize);

    // 加载数据
    function loadata(pageIndex, pageSize) {
      return myData.slice(pageIndex * pageSize, (pageIndex * pageSize + pageSize));
    }
    loadata(pageIndex, pageSize)

    // 分页: (pageIndex*pageSize)  (pageIndex*pageSize + pageSize)
    let timeID = null;
    function autoPlay() {
      timeID = setInterval(function () {
        if (pageIndex == count - 1) {
          pageIndex = 0;
        }
        pageIndex++;
        let res = loadata(pageIndex, pageSize);
        // 将当前结果设置给图表
        option.series[0].data = res;

        // 随机产生8条颜色
        let colors = [];
        for (let i = 1; i <= 8; i++) {
          let r = Math.floor(Math.random() * (200 - 100 + 1) + 100);
          let g = Math.floor(Math.random() * 200);
          let b = Math.floor(Math.random() * 256);
          colors.push(`rgb(${r},${g},${b})`);
        }
        option.color = colors;

        myChart.setOption(option);
      }, 3000);
    }
    autoPlay();

    // 鼠标进入暂停
    let pieBox = document.querySelector('.pieBox');
    pieBox.onmouseenter = function () {
      clearInterval(timeID);
    }
    pieBox.onmouseleave = function () {
      autoPlay();
    }
  })();

  // 功能4: 加载中国地图
  (function () {
    let chinaGeoCoordMap = {
      '黑龙江': [127.9688, 45.368],
      '内蒙古': [110.3467, 41.4899],
      "吉林": [125.8154, 44.2584],
      '北京市': [116.4551, 40.2539],
      "辽宁大连御码": [121.618622, 38.91459],
      "河北": [114.4995, 38.1006],
      "天津": [117.4219, 39.4189],
      "山西": [112.3352, 37.9413],
      "陕西": [109.1162, 34.2004],
      "甘肃": [103.5901, 36.3043],
      "宁夏": [106.3586, 38.1775],
      "青海": [101.4038, 36.8207],
      "新疆": [87.9236, 43.5883],
      "西藏": [91.11, 29.97],
      "四川": [103.9526, 30.7617],
      "重庆": [108.384366, 30.439702],
      "山东": [117.1582, 36.8701],
      "河南": [113.4668, 34.6234],
      "江苏": [118.8062, 31.9208],
      "安徽": [117.29, 32.0581],
      "湖北": [114.3896, 30.6628],
      "浙江": [119.5313, 29.8773],
      "福建": [119.4543, 25.9222],
      "江西": [116.0046, 28.6633],
      "湖南": [113.0823, 28.2568],
      "贵州": [106.6992, 26.7682],
      "云南": [102.9199, 25.4663],
      "广东": [113.12244, 23.009505],
      "广西": [108.479, 23.1152],
      "海南": [110.3893, 19.8516],
      '上海': [121.4648, 31.2891]
    };
    let chinaDatas = [
      [{
        name: '黑龙江',
        value: 0
      }], [{
        name: '内蒙古',
        value: 0
      }], [{
        name: '吉林',
        value: 0
      }], [{
        name: '辽宁大连御码',
        value: 0
      }], [{
        name: '河北',
        value: 0
      }]
    ];

    let convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = chinaGeoCoordMap[dataItem[0].name];
        var toCoord = [121.618622, 38.91459];
        if (fromCoord && toCoord) {
          res.push([{
            coord: fromCoord,
            value: dataItem[0].value
          }, {
            coord: toCoord,
          }]);
        }
      }
      return res;
    };
    let series = [];
    [['辽宁大连御码', chinaDatas]].forEach(function (item, i) {
      console.log(item)
      series.push({
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 5, //图标大小
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: .3 //尾迹线条曲直度
          }
        },
        data: convertData(item[1])
      }, {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: { //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {//圆环显示文字
              return params.data.name;
            },
            fontSize: 13
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: function (val) {
          return 5 + val[2] * 5; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: '#f00'
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
          };
        }),
      },
        //被攻击点
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: 'stroke',
            scale: 4
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              //offset:[5, 0],
              color: '#0f0',
              formatter: '{b}',
              textStyle: {
                color: "#0f0"
              }
            },
            emphasis: {
              show: true,
              color: "#f60"
            }
          },
          symbol: 'pin',
          symbolSize: 50,
          data: [{
            name: item[0],
            value: chinaGeoCoordMap[item[0]].concat([10]),
          }],
        }
      );
    });
    // 加载中国地图
    let myChart = echarts.init(document.querySelector('.map'));
    let option = {
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(166, 200, 76, 0.82)',
        borderColor: '#FFFFCC',
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: 'z-index:100',
        formatter: function (params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = "";
          var name = params.name;
          var value = params.value[params.seriesIndex + 1];

          return res;
        }
      },
      // 设置背景色
      backgroundColor: "rgba(255,255,255,.1)",
      visualMap: { //图例值控制
        min: 0,
        max: 1,
        calculable: true,
        show: true,
        color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        textStyle: {
          color: '#fff'
        }
      },
      geo: {
        map: 'china',
        // 当前地图
        zoom: 1.2,
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            color: 'rgba(51, 69, 89, .5)', //地图背景色
            borderColor: '#516a89', //省市边界线00fcff 516a89
            borderWidth: 1
          },
          emphasis: {
            color: 'rgba(37, 43, 61, .5)' //悬浮背景
          }
        }
      },
      series: series
    };
    myChart.setOption(option);
  })();

  // 功能5: 加载柱状图
  (function () {

    let myChart = echarts.init(document.querySelector('.bar'));

    // 定义一个渐变公共样式
    let styleObje = {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: '#00fafb' // 0% 处的颜色
      }, {
        offset: 1, color: '#006ad2' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }

    let option = {
      // 设置鼠标悬停
      tooltip: {
        // 触发类型  经过轴触发axis  经过轴触发item
        trigger: 'item',
      },
      // 设置网格
      grid: {
        show: true,
        left: '0',
        right: '0',
        top: '3%',
        bottom: '0',
        borderColor: 'rgba(0, 240, 255, 0.3)',
        // 是否显示刻度值
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
        // 设置刻度线
        axisTick: {
          show: false
        },
        // 设置刻度线文字相关样式
        axisLabel: {
          color: "#4d96ef"
        }
      },
      yAxis: {
        type: 'value',
        // 数据分割线
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 240, 255, 0.3)'
          }
        },
        // 设置刻度线样式
        axisLine: {
          show: false,
        },
        // 设置刻度线文字相关样式
        axisLabel: {
          color: "#4d96ef"
        },
        // 设置刻度线
        axisTick: {
          show: false
        },
      },
      series: [
        {
          data: [2100, 1900, 1700, 1560, 1400, { value: 1200, itemStyle: { color: '#254065' } }, { value: 1200, itemStyle: { color: '#254065' } }, { value: 1200, itemStyle: { color: '#254065' } }, 900, 750, 600, 480, 240],
          // 设置渐变颜色
          itemStyle: {
            color: styleObje
          },
          type: 'bar'
        }
      ]
    };
    myChart.setOption(option);
    let timeID = null;
    timeID = setInterval(function () {
      autoPlay();
    }, 2000);

    function autoPlay() {
      let dataAry = [];
      for (let i = 1; i <= 13; i++) {
        let rd = Math.floor(Math.random() * (3000 - 150 + 1) + 150);
        let res = dataAry.some(function (item) {
          return item == rd;
        })
        if (res) return;
        dataAry.push(rd);
      }
      option.series[0].data = dataAry;
      myChart.setOption(option);
    }

    let bar = document.querySelector('.bar');
    bar.onmouseenter = function () {
      clearTimeout(timeID);
    }
    bar.onmouseleave = function () {
      timeID = setInterval(function () {
        autoPlay();
      }, 2000);
    }
  })();

  // 功能6: 切换订单量
  (function () {
    let btns = document.querySelectorAll('.right_top_continer .title a');
    btns.forEach(function (item, index) {
      item.onclick = function () {
        document.querySelector('.right_top_continer .title .active').classList.remove('active');
        this.classList.add('active');

        // 控制元素隐藏和显示
        document.querySelectorAll('.right_top_continer .content .item').forEach(function (item) {
          item.style.display = 'none';
        })
        document.querySelectorAll('.right_top_continer .content .item')[index].style.display = 'block';
      }
    });

    let i = 0;
    // 定时器自动切换
    let timeID = setInterval(function () {
      if (i == btns.length - 1) {
        i = -1;
      }
      i++;
      btns[i].click();
    }, 2000)

    let right_top_continer = document.querySelector('.right_top_continer');
    right_top_continer.onmouseenter = function () {
      clearInterval(timeID);
    }
    right_top_continer.onmouseleave = function () {
      timeID = setInterval(function () {
        if (i == btns.length - 1) {
          i = -1;
        }
        i++;
        btns[i].click();
      }, 2000)
    }
  })();

  // 功能7: 加载折线图
  (function () {
    let myChart = echarts.init(document.querySelector('.linebar'));
    let option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        top: '0',
        right: '0',
        data: ['预期销售', '实际销售'],
        textStyle: {
          color: '#549cfd'
        }
      },
      grid: {
        left: '0%',
        right: '0%',
        top: '15%',
        bottom: '5%',
        containLabel: true,
        borderColor: '#012f4a',
        show: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        // 刻度线
        axisLine: {
          show: false,
        },
        // 刻度
        axisTick: {
          show: false
        },
        // 刻度线文字
        axisLabel: {
          color: '#4c9bfd',
          align: "right",
        }
      },
      yAxis: {
        type: 'value',
        // 数据分割线
        splitLine: {
          lineStyle: {
            color: '#012f4a'
          }
        },
        // 显示坐标轴
        axisLine: {
          show: false
        },
        // 刻度
        axisTick: {
          show: false
        },
        // 文字
        axisLabel: {
          color: '#4c9bfd'
        }
      },
      series: [
        {
          name: '预期销售',
          type: 'line',
          stack: 'Total',
          data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          smooth: true
        },
        {
          name: '实际销售',
          type: 'line',
          stack: 'Total',
          data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
          smooth: true
        },
      ],
      color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
    };
    myChart.setOption(option);

    // 点击标题动态加载数据
    let data = {
      year: [
        [124, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 3324, 290, 330, 310, 213, 180, 200, 180, 739]
      ],
      quarter: [
        [23, 75, 12, 97, 231, 67, 98, 121, 43, 64, 376, 38],
        [43, 331, 65, 23, 78, 231, 82, 64, 43, 60, 19, 34]
      ],
      month: [
        [34, 87, 32, 76, 98, 112, 32, 87, 339, 36, 29, 36],
        [56, 43, 98, 231, 56, 87, 43, 12, 43, 534, 12, 98]
      ],
      week: [
        [43, 73, 632, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        [32, 534, 34, 187, 32, 345, 62, 68, 93, 54, 54, 324]
      ]
    };

    // 点击标题按钮
    let btns = document.querySelectorAll('.right_two_continer .title a');
    btns.forEach(function (item) {
      item.onclick = function () {
        document.querySelector('.right_two_continer .title .active').classList.remove('active');
        this.classList.add('active');

        // 点击标题获取对应的数据
        let btnName = this.dataset.btnname;

        let res = data[btnName];



        // 预期销售额
        option.series[0].data = res[0];
        // 实际销售额
        option.series[1].data = res[1];

        myChart.setOption(option);
      }
    });

    // 自动切换
    let i = 0;
    setInterval(function () {
      if (i == btns.length - 1) {
        i = -1;
      }
      i++;
      btns[i].click();
    }, 4000)

  })();

  // 功能8: 销售进度
  (function () {

    let myChart = echarts.init(document.querySelector('.progress'));
    let option = {
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['100%', '140%'],
          center: ['50%', '70%'],
          // adjust the start and end angle
          startAngle: 180,
          endAngle: 360,
          data: [
            { value: 100, },
            { value: 100, },
            { value: 200, itemStyle: { color: 'transparent' } },
          ],
          // 去掉引导线
          label: {
            show: false,
          },
          // 鼠标悬停不变化
            hoverOffset: 0, 
        }
      ]
    };
    myChart.setOption(option);
  })();

});